<!--
 * @Author: your name
 * @Date: 2021-10-07 09:59:36
 * @LastEditTime: 2021-10-08 18:42:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3.0\vue3_vite\src\pages\connection\test1\child.vue
-->
<template>
  <div>
    <h2>child</h2>
    <p>{{ count }} -- {{ faCount1 }}</p>
    <p>faCount2: {{ faCount2 }}</p>
    <a-input :value="count" @input="chChangeCount" style="width: 200px" />
  </div>
</template>

<script>
import { defineComponent, ref, toRef, onUpdated } from 'vue'
export default defineComponent({
  name: 'Child',
  props: {
    count: {
      type: Number,
    }
  },
  setup(props, ctx) {
    const faCount1 = toRef(props.count)
    const faCount2 = props.count

    onUpdated(() => {
      console.log('props.count', props.count)
    })

    const chChangeCount = (event) => {
      ctx.emit('chChangeCount', event.target.value)
    } 

    return {
      faCount1,
      faCount2,
      chChangeCount,
    }
  }
})
</script>

<style>

</style>